<template>
  <div>
    回顾组件通信
    <!-- 方式1-父子通信 -->
    <!-- 父到子通过v-bind传数据,子组件通过props来接收 -->
    <!-- 子到父,通过$emit发消息,父组件通过v-on进行监听 -->
    <!-- 通过$emit可以传数据,父组件通过$event来接收 -->

    <!-- 方式2-父子通信 -->
    <!-- 父组件通过ref得到子组件实例,可以直接调用子组件的方法,数据 -->

    <!-- 语法糖v-model,用于简化父子通信 -->
    <!-- v-model="num"等效于:value="num" @input="num=
    $event" -->
    <!--<Son ref="sonRef" :count="num" @add="num++" @addN="num+=$event" />-->
    <!-- <Son ref="sonRef" v-model="num" />
    <tom />
    <jerry /> -->
    <div>token={{ $store.state.user.token }}</div>
    <button @click="setToken">setToken</button>
  </div></template>

<script>
// import Jerry from './Components/Jerry.vue'

// import Son from './Components/Son.vue'
// import Tom from './Components/Tom.vue'
export default {
  components: {
    // Son,
    // Tom,
    // Jerry
  },
  data() {
    return {
      num: 0
    }
  },
  mounted() {
    // this.$refs.sonRef.$refs.inputRef.focus()
    // this.$refs.sonRef.focus()
  },
  methods: {
    setToken() {
      // 方式1-调用模块当中mutations
      this.$store.commit('user/setToken', '123')
    }
  }
}
</script>

<style>

</style>
